<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—月度结转"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LDateTimeSelect3 label="上次结存时间" :value="time" @subtime-event="getNewTime"></LDateTimeSelect3>
      <LSelect label="仓库" :value="ware" :options="option2" @selected-event="getNewSelected2" style="margin-left: 16px"></LSelect>
      <LButton label="载入数据" style="margin-left: 16px"></LButton>
      <LButton label="结存当月" style="margin-left: 16px"></LButton>
    </section>
    <!-- 表格标题 -->
    <div style="font-size:2rem;text-align:center;margin:10px 0">月度汇总表</div>
    <!-- 表格 -->
    <!-- <el-table :data="tableData1" border show-summary style="width: 100%" :summary-method="getSummaries" id="table">
      <el-table-column prop="a" label="物品编号"></el-table-column>
      <el-table-column prop="b" label="物品名称"></el-table-column>
      <el-table-column prop="c" label="规格"></el-table-column>
      <el-table-column prop="d" label="计量单位"></el-table-column>
      <el-table-column label="期初库存">
        <el-table-column prop="e1" label="数量"></el-table-column>
        <el-table-column prop="e2" label="金额"></el-table-column>
      </el-table-column>
      <el-table-column label="本期收入">
        <el-table-column prop="f1" label="数量"></el-table-column>
        <el-table-column prop="f2" label="金额"></el-table-column>
      </el-table-column>
      <el-table-column label="本期发出">
        <el-table-column prop="g1" label="数量"></el-table-column>
        <el-table-column prop="g2" label="金额"></el-table-column>
      </el-table-column>
      <el-table-column label="月末结余">
        <el-table-column prop="h1" label="数量"></el-table-column>
        <el-table-column prop="h2" label="金额"></el-table-column>
      </el-table-column>
      <el-table-column prop="i" label="备注"></el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect3 from "@/components/LDateTimeSelect3.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect3,
    LSelect,
  },
  data() {
    return {
      time: "",
      ware: "1",
      option2: [{ label: "仓库", value: "1" }],
      tableData1: [
        {
          a: "1001",
          b: "铅笔",
          c: "2H",
          d: "支",
          e1: "0",
          e2: "3",
          f1: "2",
          f2: "3",
          g1: "2",
          g2: "3",
          h1: "2",
          h2: "3",
          i: "",
        },
        {
          a: "1002",
          b: "计算器",
          c: "XXX",
          d: "个",
          e1: "0",
          e2: "2",
          f1: "3",
          f2: "4",
          g1: "5",
          g2: "6",
          h1: "7",
          h2: "8",
          i: "",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //下拉框获取仓库
    getNewSelected2(s) {
      this.ware = s;
    },
    //重置条件
    clearSelected() {
      this.time = "";
      this.ware = "1";
    },
    //导出
    exportExcel() {
      console.log("导出数据按钮点击~~~");

      // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
      var html =
        "<html><head><meta charset='utf-8' /></head><body>" +
        document.getElementById("table").outerHTML +
        "</body></html>";
      // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
      var blob = new Blob([html], { type: "application/vnd.ms-excel" });
      var a = document.getElementsByTagName("a")[0];
      // 利用URL.createObjectURL()方法为a元素生成blob URL
      a.href = URL.createObjectURL(blob);
      // 设置文件名
      a.download = "材料报表.xls";

      console.log("导出数据按钮点击结束~~~");
    },
    //自定义表格合计
    getSummaries(param) {
      const { columns, data } = param;
      console.log("+++", columns, data);
      console.log("---", data);
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (index === columns.length - 1) {
          sums[index] = "";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row {
  border: 1px solid RGBA(255, 255, 255, 1);
  padding: 3vh 0 0 0;
  position: relative;

  &:last-child {
    margin-top: 5vh;
  }

  .row-title {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: RGBA(255, 255, 255, 1);
    position: absolute;
    left: 1vw;
    top: -1.6vh;
  }

  .row-text {
    display: inline-block;
    width: 250px;
    color: red;
    position: absolute;
    margin-left: 2vw;
  }

  .row-1 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 0 0;
  }
}

// 表格内图片样式
/deep/ .el-form {
  img {
    position: absolute;
    margin-left: 0.2vw;
    margin-top: 0.5vh;
  }
}

a {
  margin-left: 16px;
  width: 98px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #567cb8;
  color: #000000;
  text-decoration: none;
}
</style>
